<template>
  <!-- 完全保持原有的模板结构不变 -->
  <div class="social-platforms">
    <div class="social-platforms__wrapper">
      <div
        v-for="platform in platforms"
        :key="platform.id"
        class="social-platforms__item"
        :class="{ 'is-selected': isPlatformSelected(platform.name) }"
        @click="togglePlatform(platform.name)"
      >
        <div class="social-platforms__icon-container">
          <img
            :src="platform.icon"
            alt="Platform Icon"
            class="social-platforms__icon"
          />
        </div>
        <div class="social-platforms__name">{{ platform.name }}</div>
        <!-- <div
          v-show="isPlatformSelected(platform.name)"
          class="social-platforms__close-icon"
          @click.stop="removePlatform(platform.name)"
        >
          <div>×</div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedPlatforms: [], // 仍然保留本地数据
      platforms: [
        {
          id: 1,
          name: "Booking",
          icon: require("@/assets/platforms/booking.png"),
        },
        {
          id: 2,
          name: "Trip",
          icon: require("@/assets/platforms/trip.png"),
        },
        {
          id: 3,
          name: "Expedia",
          icon: require("@/assets/platforms/expedia.png"),
        },
        {
          id: 4,
          name: "Google",
          icon: require("@/assets/platforms/google.png"),
        },
        {
          id: 5,
          name: "Tripadvisor",
          icon: require("@/assets/platforms/tripadvisor.png"),
        },
      ],
    };
  },

  created() {
    this.$message = require("element-ui").Message;
    // 初始化时从Vuex获取数据
    this.initializeFromVuex();

    // 打印子组件传递的平台名称
    console.log(
      "子组件传递的平台名称：",
      this.$store.state.dashBoard.selectedPlatforms
    );
  },

  methods: {
    // 从Vuex初始化数据
    initializeFromVuex() {
      const vuexPlatforms = this.$store.state.dashBoard.selectedPlatforms || [];
      this.selectedPlatforms = [...vuexPlatforms];

      // 如果Vuex中没有数据，默认全选
      if (this.selectedPlatforms.length === 0) {
        this.selectedPlatforms = this.platforms.map((p) =>
          p.name.toUpperCase()
        );
        this.updateVuex();
      }
    },

    // 更新Vuex状态
    updateVuex() {
      this.$store.dispatch("dashBoard/updateSelectedPlatforms", [
        ...this.selectedPlatforms,
      ]);
    },

    // 检查平台是否选中
    isPlatformSelected(name) {
      return this.selectedPlatforms.includes(name.toUpperCase());
    },

    // 切换平台选择状态
    togglePlatform(name) {
      const upperName = name.toUpperCase();

      if (this.selectedPlatforms.includes(upperName)) {
        // 如果已经是选中状态，检查是否可以取消选中
        if (this.selectedPlatforms.length <= 1) {
          this.$message({
            message: "Choose at least one platform",
            type: "warning",
            duration: 1000,
          });
          return;
        }
        this.selectedPlatforms = this.selectedPlatforms.filter(
          (p) => p !== upperName
        );
      } else {
        // 如果是未选中状态，直接添加
        this.selectedPlatforms.push(upperName);
      }

      // 更新Vuex
      this.updateVuex();
    },

    // 移除平台
    removePlatform(name) {
      const upperName = name.toUpperCase();

      if (this.selectedPlatforms.length <= 1) {
        this.$message({
          message: "Choose at least one platform",
          type: "warning",
          duration: 2000,
        });
        return;
      }

      this.selectedPlatforms = this.selectedPlatforms.filter(
        (p) => p !== upperName
      );

      // 更新Vuex
      this.updateVuex();
    },
  },
};
</script>

<!-- 保持原有的样式完全不变 -->
<style scoped lang="scss">
.social-platforms {
  display: flex;
  width: 100%;

  .social-platforms__wrapper {
    display: flex;
    gap: 12px;
    white-space: nowrap;
    min-width: 100%;
  }

  .social-platforms__item {
    position: relative;
    flex: 0 0 calc((100% - (8 * 10px)) / 9);
    width: 1.0417rem;
    // min-height: 50px;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 12px ;
    border: 1px solid #cdcccc;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.2s ease;

    .social-platforms__icon-container {
      margin-right: 8px;
      .social-platforms__icon {
        width: 0.1667rem;
        height: 0.1667rem;
        img {
          height: 100%;
          width: 100%;
        }
      }
    }

    .social-platforms__name {
      font-size: 0.1111rem;
      font-weight: 600;
      color: #232323;
    }

    .social-platforms__close-icon {
      position: absolute;
      top: -15%;
      right: -5%;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #6a6969;
      color: #fff;
      cursor: pointer;
    }
  }

  .social-platforms__item.is-selected {
    border: 2px solid #2d83ca;
    background-color: #d2ebff;
  }
}
</style>
